/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="empty-operate__container">
        <img src="../../img/empty-model.png"
             alt=""
             class="empty__img">
        <div class="empty__title">
            <lang>暂时没有可以预览的数据</lang>
        </div>
        <div class="empty__content">
            <lang>预览区域即时展示执行每一步特征处理后的数据</lang>
        </div>
        <div class="empty__content">
            <lang>添加数据集后可继续新增特征处理步骤</lang>
        </div>
        <sf-button-primary 
            class="common-btn add_btn"
            @click.native="_addDataSet">
            <lang>添加数据集</lang>
        </sf-button-primary>
    </div>
</template>
<script lang=ts>

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'EmptyOperate'
})
export default class EmptyPreview extends Vue {

    async _addDataSet () {
        this.$emit('add-dataSet');
    }
};
</script>
<style lang="less">
    .empty-operate__container{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        align-items: center;
        margin-bottom: 30px;
        .empty__img{
            width: 180px;
            height: 96px;
            margin-bottom:15px;
        }
        .empty__title{
            font-size: 14px;
            color: #14161A;
            margin-bottom: 8px;
        }
        .empty__content{
            font-size: 12px;
            color: #5C5C5C;
            margin-bottom: 5px;
        }
        .add_btn{
            margin-top: 12px;
            width: 116px;
            height: 32px;
        }
    }
</style>
    